<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      window.onload = function () {
        var btn01 = document.getElementById("btn01");
        btn01.onclick = function () {
          var li = document.createElement("li");
          li.innerHTML = "<a href='javascript:;'>新建的超链接</a>";
          u1.appendChild(li);
        };

        /**
         * 为每一个超链接绑定一个单击响应函数
         * 这里为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦
         * 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
         */
        // var allA = document.getElementsByTagName("a");
        // for (var i = 0; i < allA.length; i++) {
        //   allA[i].onclick = function () {
        //     alert("ddd");
        //   };
        // }

        /**
         * 只绑定一次事件，即可应用到多个元素上，即使元素是后面添加的
         * 可以将其绑定给元素的共同的祖先元素
         *
         * 事件的委托
         *   指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
         *   从而通过祖先元素的响应函数来处理事件
         *  事件委托是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
         */

        u1.onclick = function (event) {
          // 如果触发事件对象是我们期望的元素，则执行否则不执行
          if (event.target.className == "link") {
            alert("ddd");
          }
        };
      };
    </script>
  </head>
  <body>
    <button id="btn01">添加超链接</button>
    <ul id="u1" style="background-color: fuchsia">
      <li><p>p</p></li>
      <li><a href="javascritp:;" class="link">超链接1</a></li>
      <li><a href="javascritp:;" class="link">超链接2</a></li>
      <li><a href="javascritp:;" class="link">超链接3</a></li>
    </ul>
  </body>
</html>
